<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /课程详情 开始 -->
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="././" title class="c-999 fsize14">首页</a>
        \
        <a href="./" title class="c-999 fsize14">课程列表</a>
        \
        <span class="c-333 fsize14" v-if="course.title">{{course.title}}</span>
      </section>
      <div style="padding: 20px;background: #fff;border-radius: 22px;">
        <!--封面-->
        <article class="c-v-pic-wrap">
          <section class="p-h-video-box" id="videoPlay">
            <img :src="course.cover" :alt="course.title" class="dis c-v-pic" style="border-radius: 12px">
          </section>
        </article>
        <!--右-->
        <aside class="c-attr-wrap ">
          <section class="ml20 mr15">
            <h2 class="hLh30 txtOf mt15">
              <span class="c-333 fsize24">{{course.title}}</span>
            </h2>
            <section class="c-attr-jg" v-if="course.price!=0">
              <span class="c-333">价格：</span>
              <b class="d-red" style="font-size:24px;">￥{{course.price}}</b>
            </section>
            <section class="c-attr-jg" v-else>
              <div class="has-button">本课程免费</div>
            </section>
            <div  class="c-attr-coll">
              <section class="mt15 mb15 c-attr-mt c-attr-undis">
                <span class="c-666 fsize14">主讲： {{course.teacherName}}&nbsp;&nbsp;&nbsp;</span>
              </section>
              <section class="mt15 mb15 of">
                      <span :class="['vam',{'sc-end':isCollectCourse}]" @click.stop="doCollect">
                          <em class="icon18 scIcon ml10"></em>
                          <a class="c-666 vam ml10" title="收藏"><span v-if="isCollectCourse">取消</span>收藏</a>
                      </span>
              </section>
            </div>

            <section class="c-attr-mt">
              <a href="#chapter" style="background: #fc5531" title="立即观看" class="comm-btn c-btn-3" v-if="isbuyCourse||Number(course.price) === 0">立即观看</a>
              <a href="javascript:void(0)" title="立即购买" class="comm-btn c-btn-3" v-else @click.prevent="createOrder()"><i class="iconfont icon-goumai" ></i>立即购买</a>
            </section>
          </section>
        </aside>
        <!--中-->
        <aside class="thr-attr-box bg-0">
          <ol class="thr-attr-ol clearfix">
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-333 f-fM">购买数</span>
                <br>
                <h6 class="c-333 f-fM mt10">{{course.buyCount}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-333 f-fM">课时数</span>
                <br>
                <h6 class="c-333 f-fM mt10">{{course.lessonNum}}</h6>
              </aside>
            </li>
            <li>
              <p>&nbsp;</p>
              <aside>
                <span class="c-333 f-fM">浏览数</span>
                <br>
                <h6 class="c-333 f-fM mt10">{{course.viewCount}}</h6>
              </aside>
            </li>
          </ol>
        </aside>
        <div class="clear"></div>
      </div>
      <!-- /课程封面介绍 -->
      <div class="mt20 c-infor-box">
        <article class="fl col-7">
          <section class="mr30">
            <div class="i-box">
              <div>
                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                  <a name="c-i" class="current" title="课程详情">课程详情</a>
                </section>
              </div>
              <article class="ml10 mr10 pt20">
                <div>
                  <h6 class="c-i-content c-infor-title">
                    <span>课程介绍</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <div v-html="course.description || '暂无介绍'"></div>

                    </section>
                  </div>
                </div>
                <!-- /课程介绍 -->
                <div class="mt50">
                  <h6 class="c-g-content c-infor-title">
                    <span>课程大纲</span>
                  </h6>
                  <section id="chapter">
                    <div class="lh-menu-wrap">
                      <div id="lh-menu" class="lh-menu mr10">
                        <el-collapse class="menu-chapter" v-model="activeNames">
                          <el-collapse-item :name="chapterIndex" v-for="(chapter,chapterIndex) in chapterList"
                                            v-bind:key="chapter.id" :disabled="chapter.children.length===0">
                            <!--章节列表-->
                            <template slot="title">
                              <div :title="chapter.title" :style="chapter.children.length===0?'color:#bbb':''"
                                   class="current-1">
                                <!--上 标题和小节数-->
                                <div class="name">
                                  <!--标题-->
                                  <div class="fw-600">{{chapter.title}}</div>
                                  <!--小节数-->
                                  <div>
                                    <div class="chapter-num" v-if="chapter.children.length">
                                      <span>{{chapter.children.length}}
                                        <font v-if="chapter.chapterSumTime>0">节</font>
                                        <font v-else>个小节</font>
                                      </span>
                                      <span v-if="chapter.chapterSumTime>0">| {{chapter.chapterSumTime}}分钟</span>
                                    </div>
                                    <div class="chapter-num" v-else>暂无内容</div>
                                  </div>
                                </div>
                                <!--中 描述-->
                                <p class="chapter-desc">
                                  {{chapter.description}}
                                </p>
                                <!--下 收起列表-->
                                <p class="addbox" v-if="chapter.children.length>0">
                                  <a class="showbtn" href="javascript:void(0)">
                                    <span v-if="activeNames.indexOf(chapterIndex)!==-1">收起列表</span>
                                    <span v-else>展开列表</span>
                                  </a>
                                  <i :class="activeNames.indexOf(chapterIndex)!==-1?'chevrons-down':'chevrons-up'"></i>
                                </p>
                                <!--占个位置无内容-->
                                <p class="addbox" v-else></p>
                              </div>


                            </template>
                            <div class="lab-item mb5" v-for="section in chapter.children" v-bind:key="section.id">
                              <div class="period_top" @click="toPlayer(section.id,section.videoSourceId,section.free)">
                                <div class="period_video "></div>
                                <span class="period_num"></span>
                                <span class="c_blue" v-if="section.free">(免费)</span>
                                <span>{{section.title}}</span>

                                <span class="video_time fr" v-if="section.videoLength">{{section.videoLength}}分钟</span>

                              </div>

                            </div>
                          </el-collapse-item>
                        </el-collapse>
                      </div>
                    </div>
                  </section>
                </div>
                <!-- /课程大纲 -->
              </article>
            </div>
          </section>
        </article>
        <aside class="fl col-3">
          <div class="i-box">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">主讲讲师</a>
              </section>
              <section class="stud-act-list">
                <ul style="height: auto;">
                  <li>
                    <div class="u-face">
                      <a :href="'/teacher/'+course.teacherId" target="_blank">
                        <img :src="course.avatar" width="50" height="50" alt>
                      </a>
                    </div>
                    <section class="hLh30 txtOf">
                      <a class="c-333 fsize16 fl" :href="'/teacher/'+course.teacherId" target="_blank">{{course.teacherName}}</a>
                    </section>
                    <section class="hLh20 txtOf">
                      <span class="c-999">{{course.intro}}</span>
                    </section>
                  </li>
                </ul>
              </section>
            </div>
          </div>

          <div class="i-box mt30">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">推荐课程</a>
              </section>
              <section class="stud-act-list">
                <div class="course-item" v-for="(item,index) in recommendList" :key="index" :title="item.title" @click="$router.push(item.id)">
                  <div class="course-thumb" :style="'background-image: url('+item.cover+');'" style="width: 133px; height: 75px; background-size: contain; background-repeat: round; ">

                  </div>
                  <div class="course-body">
                    <div class="course-name" :title="item.title">{{item.title}}</div>
                    <div class="course-info"> {{item.gmtModified}}</div>
                  </div>
                </div>

              </section>
            </div>
          </div>

        </aside>
        <div class="clear"></div>
      </div>


      <!-- /评论 开始 html不支持驼峰 -->
      <y-comment-block :fromData="fromCommentData"/>

    </section>


  </div>
</template>

<script>
  import '~/assets/css/iconfont.css'
  import YCommentBlock from '@/components/commentBlock'
  import course from "@/api/course"
  import order from '@/api/order'
  import collectApi from '@/api/collectApi'
  import commonUtil from '@/utils/commonUtil' //公共工具类


  export default {
    data() {
      return {
        //评论提交表单
        fromCommentData: {
          page: 1,
          limit: 4,
          targetType: 1,//业务类型 1course 2vod 3article
          targetId: this.$route.params.id,
          teacherId: ""
        },
        courseType:'',
        courseId: this.$route.params.id,
        course: {},
        chapterList: {},
        isbuyCourse: false,
        isCollectCourse: false,
        activeNames: [0],
        recommendList:[]//推荐课程
      }
    }, components: {
      YCommentBlock
    }, computed: {
      courseDesc() {
        //处理html格式
        return this.course.description ? this.course.description.replace(/<(?:.|\n)*?>/gm, '')
          .replace(/(&rdquo;)/g, '\"')
          .replace(/&ldquo;/g, '\"')
          .replace(/&mdash;/g, '-')
          .replace(/&nbsp;/g, '')
          .replace(/&gt;/g, '>')
          .replace(/&lt;/g, '<')
          .replace(/<[\w\s"':=\/]*/, '') : '';
      }
    }, head() {
      return {
        title: `${this.course.title || '加载中...'} - 智慧在线教育`,
        meta: [
          {hid: 'keywords', name: 'keywords', content: this.course.title},
          {hid: 'description', name: 'description', content: this.courseDesc}
        ],
      }
    }, mounted() {
      this.courseType=this.$enum.COURSE_TYPE.COURSE.value
      this.initCourseInfo()
    }, methods: {
      //播放视频
      toPlayer(sId, vodId, isFree) {
        if (this.course.price > 0 && !this.isbuyCourse && !isFree) {
          this.$message.warning("当前为付费内容,请前往购买")
          return false
        }
        console.log(vodId)
        if (!vodId) {
          this.$message.warning("暂无内容")
          return false
        }
        //打开新窗口
        let routeData = this.$router.resolve({path: `/player/${sId}/${vodId}`});
        window.open(routeData.href, '_blank');
      },
      initCourseInfo() {
        course.getById(this.courseId).then(response => {
          console.log("课程信息", response);
          this.course = response.course
          //处理视频时长 转为字符串
          let chapterSumTime = 0;
          response.chapterVoList.forEach(function (item) {
            chapterSumTime = 0
            item.children.forEach(function (childrenItem) {
              if (childrenItem.duration !== 0) {
                childrenItem.videoLength = commonUtil.formatSeconds(childrenItem.duration)
                chapterSumTime += childrenItem.duration
              }
            })
            item.chapterSumTime = Math.round(chapterSumTime / 60)
          })

          this.chapterList = response.chapterVoList
          // console.log("修改后的章节信息", this.chapterList)
          this.isbuyCourse = response.isbuy
          this.isCollectCourse = response.isCollect
          this.recommendList=response.recommend
          //console.log("是否购买", this.isbuyCourse)

        })
      },
      createOrder() {
        order.createOrder(this.courseType,this.courseId).then(response => {
          console.log(response)
          if (response) {
            //订单创建成功，跳转到订单页面
            // this.$router.push({path: `/order/${this.courseType}/${response}`  })
            this.$router.push({path: `/order/${response}`  })
          }
        })
      },
      doCollect() {
        collectApi.doCollect(this.courseId, this.courseType).then(res => {
          if (typeof res === "boolean") {
            this.$message.success(res ? "收藏成功" : "取消收藏成功")
            this.isCollectCourse = res;
            //console.log(res)
          }
        })
      },
    }
  }

</script>
<style scoped>
  /*修改el-ui折叠面板样式*/
  /deep/ .el-collapse {
    border-top: unset;
  }

  /deep/ .el-collapse-item__header {
    height: unset;
    justify-content: space-between;
    padding: 18px 0 18px 0;
  }

  /deep/ .el-collapse-item__arrow {
    /*align-self: flex-start;*/
    display: none;
  }
  .iconfont{
    width: 16px;
    height: 16px;
    display: inline-block;
    padding: 0 5px;
  }
  /*小节数量*/
  .chapter-num {
    font-size: 12px;
    color: #93999f;
    font-weight: 400;
    float: right;
    align-self: flex-start;
  }

  /*章节描述*/
  .chapter-desc {
    margin-bottom: 8px;
    line-height: 24px;
    font-size: 14px;
    color: #1c1f21;
  }

  /*收起列表*/
  .addbox {
    height: 20px;
    line-height: 20px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
  }

  .name {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 16px;
    color: #1c1f21;
    margin-bottom: 8px;
  }

  .current-1 {
    color: #1c1f21;
    width: 100%;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
  }

  .chevrons-up {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg t='1645171560322' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1825' width='14' height='14'%3E%3Cpath d='M768 800l0-115.2L512 480l-256 204.8 0 115.2 256-204.8L768 800zM512 339.2l256 204.8L768 428.8 512 224 256 428.8l0 115.2L512 339.2z' p-id='1826' fill='%233377ff'%3E%3C/path%3E%3C/svg%3E");
  }

  .chevrons-down {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg t='1645172035339' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1718' width='14' height='14'%3E%3Cpath d='M512 428.8 256 224l0 115.2 256 204.8 256-204.8L768 224 512 428.8zM256 480l0 115.2 256 204.8 256-204.8L768 480l-256 204.8L256 480z' p-id='1719' fill='%233377ff'%3E%3C/path%3E%3C/svg%3E");
  }

  .showbtn {
    cursor: pointer;
    font-size: 14px;
    color: #37f;
    line-height: 24px;
  }
  .c-attr-coll{
    display: flex;
  }
  .c-btn-3 {
    width: 136px;
    height: 36px;
    color: #fff;
    background: #d51423;
    border: none;
    border-radius: 6px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
  }

  .period_top {
    padding-left: 20px;
    height: 46px;
    line-height: 46px;
    position: relative;
    padding-right: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .period_top .period_video {
    display: inline-block;
    width: 17px;
    height: 17px;
    position: relative;
    top: 5px;
    margin-right: 10px;
    background: url("./static/d372b85.svg") 50%;
    background-size: 17px 17px;
  }

  .c_blue {
    color: #107ec4;
  }

  .period_top.on, .lab-item:hover {
    cursor: pointer;
    background: #f2f2f2;
    color: #d51423;
  }

  .period_top.on .period_video, .period_top:hover .period_video {
    background: url("./static/e8e8de1.svg") 50%;
    background-size: 17px 17px;
  }
/*推荐课程*/
  .course-item{
    width: 248px;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    padding: 5px;
    background: #fafafa;
    border-radius: 5px;
    margin-top: 10px;
  }
  .course-item:hover{
    cursor: pointer;
  }
  .course-body{
    max-width: 134px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    padding-left: 10px;
  }
  .course-name{
    font-size: 13px;
    max-height: 49px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .course-info{
    color: #999;
    font-size: 12px;
  }
</style>
